<template>
  <view class="menu-content">
    <view class="menu-content__top">
      <view class="cat-info">
        <text>{{ catName }}</text>
        <text>（{{ goodsNum }}）</text>
      </view>
      <view class="action-btn">
        <text v-if="!isSort" @click="changeSortType">排序</text>
        <text v-if="isSort" @click="handleSaveSort">保存</text>
      </view>
    </view>
    <view class="menu-content__body">
      <view v-for="(item, index) in goodList" :key="index" class="menu-content__item">
        <GoodsCard
          :data="item"
          :is-sort="isSort"
          :up-disabled="index==0"
          :down-disabled="index==goodList.length-1"
          @up="handleUp(index)"
          @down="handleDown(index)"
          @delete="handleDelete(index)"
          @edit="handleEdit(index)"
        />
      </view>
    </view>
  </view>
</template>

<script>
import GoodsCard from "../../../../components/public/GoodsCard/index.vue";
import { moveListItem } from "../../../../utils/menu";
import { mapActions, mapMutations } from "vuex";
export default {
  components: {
    GoodsCard
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    catName: {
      type: String,
      default: () => ""
    },
    catId: {
      type: [String, Number],
      default: () => ""
    }
  },
  data() {
    return {
      isSort: false,
      goodList: [],
      changeList: []
    };
  },
  computed: {
    goodsNum() {
      return this.goodList.length;
    }
  },
  watch: {
    data() {
      this.goodList = this.data;
    }
  },
  methods: {
    ...mapActions({ putGoodsSort: "putGoodsSort", deleteGoods: "deleteGoods" }),
    ...mapMutations({
      UPDATE_GOODS_LIST: "UPDATE_GOODS_LIST",
      SET_GOODS_INFO: "SET_GOODS_INFO"
    }),
    changeSortType() {
      this.isSort = !this.isSort;
    },
    handleUp(index) {
      let changeItem = moveListItem(this.goodList, index, index - 1);
      this.addChangeItem(changeItem);
    },
    handleDown(index) {
      let changeItem = moveListItem(this.goodList, index, index + 1);
      this.addChangeItem(changeItem);
    },
    // 删除商品
    handleDelete(index) {
      let id = this.goodList[index].id;
      this.deleteGoods(id).then(res => {
        if (!res.code) {
          uni.showToast({
            icon: "none",
            title: "移除商品成功"
          });
          this.goodList.splice(index, 1);
          this.UPDATE_GOODS_LIST({ catId: this.catId, list: this.goodList });
        }
      });
    },
    handleEdit(index) {
      this.SET_GOODS_INFO(this.goodList[index]);
      console.log(this.goodList[index]);

      this.$goto(`goods`, { id: this.goodList[index].id });
    },
    // 保存排序
    handleSaveSort() {
      uni.showLoading();
      let params = this.changeList.map(v => {
        return {
          goodsId: v.id,
          sort: v.sort
        };
      });
      this.putGoodsSort(params)
        .then(res => {
          this.UPDATE_GOODS_LIST({ catId: this.catId, list: this.goodList });
          this.changeSortType();
          uni.hideLoading();
          uni.showToast({
            icon: "none",
            title: "保存成功"
          });
        })
        .catch(() => {
          uni.hideLoading();
        });
    },
    addChangeItem(item) {
      let index = this.changeList.findIndex(v => v.id == item.id);
      if (index == -1) this.changeList.push(item);
      else this.changeList[index] = item;
    }
  }
};
</script>

<style scoped lang="scss">
.menu-content {
  height: 100%;
  // overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-left: $uni-spacing-col-lg;
  .menu-content__top {
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-lg;
    padding: $uni-spacing-col-lg $uni-spacing-col-lg $uni-spacing-col-lg 0;
    .cat-info {
      color: $uni-text-color-grey;
    }
    .action-btn {
      color: $uni-color-primary;
    }
  }
  .menu-content__body {
    overflow-y: auto;
    flex: 1;
    padding-bottom: 24rpx;
  }
}
</style>
